<template>
  <div class="display" ref="display">
    <div class="dialogue" ref="dialogue" >
      <ComBanner @getQuestion="getQuestion"></ComBanner>
      <div v-if="showHistoryTxt" class="history" @click="getHistory">查看历史记录</div>
      <ul class="list">
        <li :class="['item',item.sender]" v-for="(item,index) in chatList" :key="index">
          <img v-if="item.sender !== 'system'" class="img" :src="item.senderAvatar" alt="" >
          <template v-if="item.sender === 'system'" >
            <div>{{item.content}} </div>
          </template>
          <template v-else-if="item.sender === 'client'">
            <div class="client_service" >
              <div class="content" :style="{ padding: item.type === 'img'&& 0, background:item.type === 'img'&&'transparent'}">
                <div class="imgSrc" v-viewer  v-if="item.type === 'img'">
                  <img :src="item?.imgUrl" alt="">
                </div>
                <span  v-else class="text">{{ item.content }}</span>
              </div>
            </div>
          </template>
          <template  v-else-if="item.sender === 'gpt'">
            <div class="gpt_service">
              <div class="staff">{{ item.senderName }}</div>
              <div v-if="index === chatList.length -1 && item.thinking" class="text">正在思考中...</div>
              <div v-else class="content">
                <div  :class="['contentText',index === chatList.length -1 && isLoading &&'loading']">{{ item.content }}</div>
                <div class="prompt" v-if="index === chatList.length -1? !item.helloFlag && !answering :!item?.helloFlag">
                  <div class="p_left">
                    <span class="iconfont icon icon-31tishi"></span>
                    <span class="promptText">此回复由AI生成，仅供参考</span>
                  </div>
                  <div class="p_right">
                    <span :class="['iconfont','icon',item.feedback === 1?'icon-dianzan':'icon-dianzan1']" @click="item.feedback === 0 && praise($event,index,item.messageId )"></span>
                    <span :class="['iconfont','icon','tread',item.feedback <= -1?'icon-dianzan':'icon-dianzan1']" @click=" item.feedback === 0 && tread($event,index,item.messageId)"></span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else-if="item.sender === 'agent'">
            <div class="agent_service">
              <div class="staff">{{ item.senderName }}</div>
              <div class="">
                <div class="content">
                  <div class="imgSrc" v-viewer v-if="item.type === 'img'">
                    <img :src="item?.imgUrl" alt="">
                  </div>
                  <div  v-else class="contentText">{{ item.content }}</div>
                </div>
              </div>
            </div>
          </template>
        </li>
      </ul>
    </div>
    <div ref="tabBar" class="tabBar">
      <div  class="stop" v-show="shoeStop" @click="stopChat">
        <img src="@/assets/image/stop.png" alt="" class="stop_img">
        <span class="stop_test">停止生成</span>
      </div>
      <div class="footer">
        <ul v-if="false" class="contact">
          <li class="item">
            <a :href="`tel:${phone}`">
              <span class="iconfont icon icon-a-dianhua1"></span>
              <span class="text">客服电话</span>
            </a>
          </li>
          <li :class="['item',answerer === 1 && 'isOver']">
            <button v-if="answerer === 0 " @click="changeOver">
              <span class="iconfont icon icon-kefu-ermai"></span>
              <span class="text">人工客服</span>
            </button>
            <button  v-if="answerer === 1 " @click="closeOver">
              <span class="iconfont icon icon-kefu-ermai"></span>
              <span class="text">结束会话</span>
            </button>
          </li>
          <li class="item" @click="openFeedback">
            <span class="iconfont icon icon-a-pingjia21"></span>
            <span class="text">评价与反馈</span>
          </li>
        </ul >
        <div class="message">
          <div class="camera" v-if="false">
            <input id="file" type="file" ref="file"  @change="checkFile" :accept="documentFormat"/>
            <label for="file"><span class="iconfont icon icon-tupianshangchuan"></span></label>
          </div>
          <form action="#" @submit="openSend">
            <textarea class="inp" ref="details" :rows="rows" v-model.trim="chatMsg" placeholder="请在此输入你的问题"></textarea>
            <div class="send" @click="openSend"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!--    showFeedback-->
  <ComFeedback :sessionId="MySessionId" :showFeedback="showFeedback" @closeFeedback="closeFeedback" />
  <!--    showDialog-->
  <ComDialog :treadData="treadData" :ShowDialog="showDialog" @closeDialog="closeDialog" @winCloseDialog="winCloseDialog"/>

</template>

<script setup>
import {getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import compressImg from '@/utils/compressImg.js'
import { debounce } from 'lodash-es';
import {useWebSocket} from '@vueuse/core'
import {stringify} from 'qs'
import ComBanner from "@/components/comBanner.vue";
import ComDialog from "@/components/ComDialog.vue";
import ComFeedback from "@/components/ComFeedback.vue";
import {createSession, getFeedbackMessage, HistoryMessage, uploadImg} from "@/utils/api.js";
import {ElMessage} from "element-plus";
const phone = import.meta.env.VITE_PHONE;


const { proxy } = getCurrentInstance();
const { mittBus } = proxy;

const dialogue = ref()
const details = ref()
const chatList = ref([])// 聊天数据
const chatMsg = ref('') // 对话文本
const thought = ref(false)// 思考中
const answering = ref(false)// 回答中
const showDialog = ref(false) // Gpt内容反馈
const showFeedback = ref(false) // 评价与反馈
const treadData = ref({}) // Gpt内容反馈
const heartbeat = ref(false)

const isLoading = ref(false)
const sessionId = ref(null)// 对话id
const MySessionId = ref(null)// 评价是时对话id
const messageId = ref(null)
const isTypeImg = ref('txt') // 对话id

const shoeStop = ref(false)

// const createSessionSucceed = ref(false)
const answerer = ref(0)//gpt 0 坐席1
let webSocketUrl = ref(import.meta.env.VITE_WS_ADDRESS_URL)
const CTK = localStorage.getItem('CTK')
const height = ref(0)
// 创建 sessionId
async function getSessionId(){
  const v = await createSession({answerer:answerer.value})
  if(v?.c === '100') {
    sessionId.value = v?.d
    if(v?.d){
      MySessionId.value = v.d
    }
  }else {
    ElMessage({
      type:'warning',
      customClass:"MyMsg",
      message:v?.m
    })
  }
}

let socket1,socket2
let createSoketTime
mittBus.on('CTK',async (CTK)=>{
  await getSessionId()
  if(sessionId.value){
    socket1 = webSocket({CTK,sessionId:sessionId.value})
  }else {
    createSoketTime = setInterval(()=>{
      if(socket1){
        clearInterval(createSoketTime)
        return
      }
      exists(CTK)
    },100)
  }
})
function exists(CTK){
  if(CTK && sessionId.value){
    socket1 = webSocket({CTK, sessionId:sessionId.value})
  }
}

// 计时器
const sendTime = ref(null),timer = ref(0)
let startTime = new Date();
// 开启计时器
function sendTimer(){
  let formerlyTime = new Date().getTime()
  sendTime.value = setInterval( ()=>{
    let nowTime  = new Date().getTime()
    // console.log((startTime.setTime(nowTime/1000)-startTime.setTime(formerlyTime/1000)))
    if((startTime.setTime(nowTime/1000)-startTime.setTime(formerlyTime/1000)) >= 180){
      updateTime()
      clearTime()
    }
  },1000)
}
async function updateTime(){
  closeSocket(socket2)
  let time
  time = setInterval(async ()=>{
    if( operation(socket2,'Status') === 'CLOSED'){
      socket2 = null
      let obj = {
        content:'会话已超时',
        sender :"system",
        type:"txt",
        finished:true,
      }
      chatList.value.push(obj)
      clearInterval(time)
      await nextTick(() => {
        dialogue.value.scrollTop = dialogue.value.scrollHeight
      })
      if(!socket2 && !socket1){
        answerer.value = 0
        await getSessionId()
        await exists(CTK)
      }
    }
  },10)
}
// 关闭计时器
function clearTime(){
  clearInterval(sendTime.value)
  sendTime.value = null
  timer.value = 0
}

// 发送
async function openSend(event){
  event.preventDefault()
  if(chatMsg.value === '') return
  thought.value = true
  if(answerer.value === 1){
    clearTime()
    sendTimer()
  }
  sendMsg(false,chatMsg.value)
}

// 发送快捷回复
function getQuestion(v){
  thought.value = true
  if(answerer.value === 1){
    clearTime()
    sendTimer()
  }
  sendMsg(true,v)
}
let config = JSON.parse(localStorage.getItem('config') || null)
// 发送消息方法
function sendMsg(isQuickReply,content){
  let senderAvatar
  if(config && config?.csClientAvatar){
    senderAvatar = config?.csClientAvatar
  }else {
    senderAvatar = 'https://static.soulgpt.cn/avatar/cs/client/111.png?tempid='+Math.random()
  }
  if(answering.value) return ElMessage({
    type:'warning',
    customClass:"MyMsg",
    message:'回答中，请稍后'
  })
  const obj = {
    content: isTypeImg.value === 'txt' ? content : null,
    imgUrl: isTypeImg.value === 'img' ? content : null,
    sender:'client',
    type:isTypeImg.value,
    finished:true,
    senderAvatar,
    messageId:messageId.value,
  }
  chatList.value.push(obj)
  nextTick(()=>{
    dialogue.value.scrollTop = dialogue.value.scrollHeight
  })
  let  data = {
    input: isTypeImg.value === 'txt' ? content : null,
    imgUrl: isTypeImg.value === 'img' ? content : null,
    businessCode:'generate',
    customerServicePlatform:'myl',
    sessionId:sessionId.value,
    type:isTypeImg.value,
  }
  if(answerer.value===1){
    delete data.customerServicePlatform
  }
  operation(answerer.value===0?socket1:socket2,'Send',JSON.stringify(data))
  if(!isQuickReply){
    chatMsg.value = ''
  }
  if( isTypeImg.value === 'img'){
    isTypeImg.value = 'txt'
  }
}
// 发送图片
const file = ref()
const documentFormat= ref(['image/apng','image/avif','image/bmp','image/gif','image/x-icon','image/jpeg','image/png','image/svg+xml','image/tiff','image/webp'])
function checkFile(){
  if(answerer.value === 0){
    return  ElMessage({
      message: '发送图片请联系人工客服',
      customClass:"MyMsg",
      type: 'warning'
    })
  }
  const newFile = file.value.files[0]
  if(!documentFormat.value.includes(newFile.type)) return ElMessage({ type: 'warning', message: '您上传的图片格式超出主流图片格式了' })
  compressImg(newFile,0.1).then(res => {//compressImg方法见附录
    uploadImg({file:res.file}).then(v =>{
      if(v?.c === '100'){
        isTypeImg.value = 'img'
        sendMsg(true,v?.d)
      }
    })
  })
}
// 转人工客服
const changeOver =debounce(async () =>{
  if(answering.value) return ElMessage({
    type:'warning',
    customClass:"MyMsg",
    message:'GPT正在回答中，请稍后'
  })
  await closeSocket(socket1)
  await CloseSocket1()
  heartbeat.value = true
},300)
// 关闭socket1
function  CloseSocket1(){
  let time
  time = setInterval(async ()=>{
    const  status = operation(socket1,'Status')
    if(status  === 'CLOSED'){
      socket1 = null
      if(answerer.value === 1) return
      answerer.value = 1
      let v = await createSession({answerer:answerer.value})
      if(v?.c === '100') {
        sessionId.value = v?.d
        socket2 = webSocket({CTK, sessionId:sessionId.value})
      }
      if(v?.c === '605'){
        let obj = {
          content:v?.m,
          sender :"system",
          type:"txt",
          systemTimeFlag:false,
          finished:true,
          noWorkingTime:false
        }
        chatList.value.push(obj)
        await nextTick(() => {
          dialogue.value.scrollTop = dialogue.value.scrollHeight
        })
        answerer.value = 0
        await getSessionId()
        exists(CTK)
      }
      clearInterval(time)
      time = null
    }
  },50)
}
// 结束会话
const closeOver = debounce( async()=>{
  if(answerer.value === 0) return
  let obj = {
    content:'会话已结束',
    sender :"system",
    type:"txt",
    systemTimeFlag:false,
    finished:true,
    noWorkingTime:true
  }
  chatList.value.push(obj)
  await nextTick(() => {
    dialogue.value.scrollTop = dialogue.value.scrollHeight
  })
  operation(socket2,'Send',JSON.stringify({businessCode:"close"}))
  closeSocket(socket2)
  await CloseSocket2()
  await clearTime()
},300)
function  CloseSocket2(){
  let time
  time = setInterval(async ()=>{
    const  status = operation(socket2,'Status')
    if(status  === 'CLOSED'){
      socket2 = null
      if(answerer.value === 0) return
      answerer.value = 0
      await getSessionId()
      exists(CTK)
      clearInterval(time)
    }
  },10)
}

// 赞
function praise(e,i,messageId){
  getFeedbackMessage({feedback: 1,messageId}).then(v =>{
    if(v.c === '100'){
      e.target.classList.remove('icon-dianzan1')
      e.target.classList.add('icon-dianzan')
      chatList.value[i].feedback = 1
    }
  })
}
// 踩
function tread(e,i,messageId){
  showDialog.value = true
  treadData.value = {
    messageId,
    myIndex: i,
    event: e
  }
}
// 踩踏评论
function winCloseDialog(value){
  showDialog.value = false
  let {event,myIndex} = value
  event.target.classList.remove('icon-dianzan1')
  event.target.classList.add('icon-dianzan')
  chatList.value[myIndex].feedback = -1
}
function closeDialog(value) {
  showDialog.value = value
}
// 评价反馈
function openFeedback() {
  if(MySessionId.value === null) return  ElMessage({
    message: '暂时无法评价',
    customClass:"MyMsg",
    type: 'warning',
    grouping: true
  })
  showFeedback.value = true
}
function closeFeedback(value) {
  showFeedback.value =value
}

// 输入框高度自适应
const rows = ref(1)
let tabBar = ref()
const display = ref()
// 输入时
function adjustTextareaSize() {
  const textarea = details.value
  textarea.style.height = 'auto';
  if(textarea.scrollHeight>=100){
    textarea.style.height =  '100px';
  }else {
    textarea.style.height = textarea.scrollHeight + 'px';
  }
  tabBarHeight()
}

watch(() => chatMsg.value, () => {
  nextTick(adjustTextareaSize);
},{immediate:true})
function tabBarHeight(){
  height.value = tabBar.value.scrollHeight
}

const showHistoryTxt = ref(false)
async function QueryHistory(lastMessageId,size){
  const v = await HistoryMessage({lastMessageId,size})
  if(v?.c === '100'){
    showHistoryTxt.value = !!v?.d.length
  }
}

// 查询历史记录
let isLoad = false
function getHistory(){
  let lastMessageId = messageId.value
  if(isLoad) return
  HistoryMessage({lastMessageId,size:20}).then(v =>{
    if(v?.c === '100'){
      if(v?.d.length < 1){
        isLoad = true
        showHistoryTxt.value = false
      }
      messageId.value = v?.d[v?.d.length-1].messageId
      let list = v?.d.reverse()
      chatList.value.unshift(...list)
    }
  })
}


function millType(){
  const u = navigator.userAgent;
  const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Android
  const isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios
  if(isAndroid){
    file.value.capture = 'camera'
    file.value.accept = 'image/*'
    return
  }
  if(isIos){
    return  isIos
  }
}

onMounted(async ()=>{
  millType()
  await getSessionId()
  exists(CTK)
  MySessionId.value = sessionId.value
  await QueryHistory('',20)
  tabBarHeight ()
  // 开启
  handleAddListener()
})

// websocket
function webSocket(params){
  const { status,send, open, close } = useWebSocket(`${webSocketUrl.value}?${stringify(params)}`,{
    autoReconnect:{
      retries: 3,
      delay: 1000,
      onFailed() {
        (async ()=>{
          answerer.value = 0
          await getSessionId()
          exists(CTK)
        })()
      },
    },
    heartbeat:  {
      message: 'ping',
      interval: 5000,
      pongTimeout: 3000,
    },
    onMessage(ws,e){
      // shoeStop.value = true
      if(e.data !== 'ping'){
        watchSocket(JSON.parse(e.data))
      }
    },
    onDisconnected(){
      // shoeStop.value = false
    },
    onError(ws,e){
      (async ()=>{
        console.log('出错了，建立连接')
        answerer.value = 0
        await getSessionId()
        await exists(CTK)
      })()
      console.log(e)

    }
  })
  return {status, send, open, close}
}

// websocket 操作
function operation(Socket,StatusNum,data = undefined){
  if(StatusNum === 'Send' && data){
    Socket.send(data)
    return
  }
  if(StatusNum === 'Status'){
    return Socket?.status?.value
  }
}
// 流逝返回
let text = ref('')
// 返回数据处理
async function watchSocket(data){
  let item,content, thinking
  switch(data?.c){
    case '100':
      content = data.d.content
      thinking = data.d.thinking
      messageId.value = data.d.messageId
      item = addItem(data.d)
      break;
    case '200':
      item = ''
      break;
    case '401':
      item = ''
      break;
    case '600':
      content = data.d.content
      thinking = data.d.thinking
      messageId.value = data.d.messageId
      item = addItem(data.d)
      break;
    case '601':
      content = data.d.content
      thinking = data.d.thinking
      messageId.value = data.d.messageId
      item = addItem(data.d)
      break;
    default:
      item = addItem(data.d)
  }
  if(answerer.value === 0){
    isLoading.value = true
    text.value += content
    if(chatList.value.length){
      if(chatList.value[chatList.value.length-1].finished){
        chatList.value.push(item)
        //     let v = chatList.value[chatList.value.length-1]
        //     if(item.sender === 'system' && v?.sender ===  'system'){
        //         if(item.systemTimeFlag && v?.systemTimeFlag){
        //             chatList.value[chatList.value.length-1].content = item.content
        //         }else {
        //             if(v?.noWorkingTime && item.systemTimeFlag){
        //                 chatList.value.push(item)
        //             }else if(!item.systemTimeFlag){
        //                 chatList.value.push(item)
        //             }
        //         }
        //     }else {
        //
        //         chatList.value.push(item)
        //     }
      }
    } else {
      chatList.value.push(item)
    }
    if(data?.c === '200'){
      chatList.value[chatList.value.length-1].thinking = false
    }
    if(!data?.d.finished){
      chatList.value[chatList.value.length-1].content =  text.value
      chatList.value[chatList.value.length-1].thinking =  thinking
      chatList.value[chatList.value.length-1].feedback =  0
    }else {
      if(item.sender !== "system"){
        chatList.value[chatList.value.length-1].content =  text.value
        chatList.value[chatList.value.length-1].thinking =  thinking
        chatList.value[chatList.value.length-1].feedback =  0
        text.value = ''
        isLoading.value = false
      }
      text.value = ''
    }
    answering.value = !data?.d.finished || false
    await nextTick(()=>{
      dialogue.value.scrollTop = dialogue.value.scrollHeight
    })
  }else {
    if(item?.feedbackFlag && item?.feedbackFlag === true){
      MySessionId.value = sessionId.value
      openFeedback()
    }else {
      chatList.value.push(item)
    }
    if(item?.answerFlag && item?.answerFlag === true){
      clearTime()
      sendTimer()
    }
    if(item?.sender === "system" && item?.closed){
      closeSocket(socket2)
      clearTime()
      answerer.value = 0
      await getSessionId()
      exists(CTK)
    }
    await nextTick(()=>{
      dialogue.value.scrollTop = dialogue.value.scrollHeight
    })
  }
}

// 数据处理
function addItem(...data){
  let obj = {}
  let arr = data[0]
  for (let key in arr) {
    if(key === 'finished' && arr?.finished === false){
      obj.content += arr?.content
    }else {
      obj[key] = arr[key]
    }
  }
  return obj
}

onBeforeUnmount(()=>{
  mittBus.off('CTK')
  answerer.value === 0?closeSocket(socket1):closeSocket(socket2)

  // 手动销毁
  handleRemoveListener()
})
function closeSocket(socket = null){
  if(!socket) return
  socket.close()
  socket = null
}
const stopChat = () =>{
  if(! messageId.value) return
  const data = {
    messageId: messageId.value,
    businessCode:'stop'
  }
  socket1.send(JSON.stringify(data))
  messageId.value = null
  shoeStop.value = false
}

// // 刷新事件
// window.onbeforeunload= function (e) {
//     e = e || window.event;
//     if (e) {
//         e.returnValue = '关闭提示';
//     }
//     if(answerer.value === 0){
//         closeSocket(socket1)
//     }else {
//         closeSocket(socket2)
//     }
//    setTimeout(function(){
//             setTimeout(async ()=>{
//                 answerer.value = 0
//                 await getSessionId()
//                 exists(CTK)
//             }, 50)}
//     , 50);
// };
function getHiddenStatus() {
  if(document.visibilityState === 'hidden') {
    //记录页面隐藏时间
    let hiddenTime = new Date().getTime()
    sessionStorage.setItem('hiddenTime',hiddenTime)
  } else {
    let visibleTime = new Date().getTime();
    let hiddenTime = sessionStorage.getItem('hiddenTime')*1
    //页面再次可见的时间-隐藏时间>10S,重连
    if((visibleTime - hiddenTime) / 1000 > 10){
      if(answerer.value===0){
        if(operation(socket1,'Status') === 'CLOSED'){
          (async()=>{
            await getSessionId()
            await exists(CTK)
          })()
        }
        return
      }
      if(answerer.value===1){
        if(operation(socket2,'Status') === 'CLOSED'){
          if(!socket1){
            (async()=>{
              answerer.value = 0
              await getSessionId()
              await exists(CTK)
            })()
          }
        }
      }
    }else{
      console.log('还没有到断开的时间')
    }
  }
}
function handleAddListener() {
  document.addEventListener('visibilitychange', getHiddenStatus, true);
}
function handleRemoveListener() {
  document.removeEventListener('visibilitychange', getHiddenStatus, true);
}

const setVh =() => {
  console.log(window.innerHeight )
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始设置
setVh();

// 监听窗口大小变化事件
window.addEventListener('resize', setVh);
</script>

<style lang="scss" scoped>
.display{
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: #F1F9FF;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  .dialogue{

    padding: 0 30px;
    overflow-y: auto;
    -ms-overflow-style: none;
    .history{
      text-align: center;
      font-size: 24px;
      height: 35px;
      color: #8CBEFF;
      font-family: "Regular",serif;
      text-decoration: underline;
    }
    .list{
      display: flex;
      flex-direction: column;
      gap: 30px 0;
      margin-bottom: 10px;
      .item{
        width: 100%;
        display: flex;
        align-items: flex-start;
        .img{
          width: 58px;
          height: 58px;
          border-radius: 50%;
        }
        .staff{
          display: inline-block;
          font-size: 24px;
          color: #3D3D3D;
          line-height: 42px;
        }
        .content{
          margin-top: 10px;
          border-radius: 0 15px 15px 15px;
          word-break: break-all;
          box-sizing: border-box;
          background: #fff;
          font-size: 28px;
          color: #3D3D3D;
          white-space: pre-wrap;
          line-height: 50px;
          flex-direction: column;
        }
        &.client{
          flex: 1;
          flex-direction: row-reverse;
          .img{
            margin-top: 15px;
          }
          .client_service{
            width: 534px;
            margin-right: 20px;
            display: flex;
            justify-content: flex-end;
            .content{
              margin-top: 0;
              background: #D8EFFF;
              border-radius: 15px 0 15px 15px;
              padding: 24px 20px;

              .imgSrc{
                img{
                  border-radius: 6px;
                  object-fit: cover;
                  width: auto;
                  height: auto;
                  max-width: 100%;
                  max-height: 100%;
                }
              }
            }
          }
        }
        &.gpt{
          flex: 1;
          .gpt_service{
            width: 534px;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            .staff{
              font-size: 24px;
              color: #3D3D3D;
              height: 42px;
              line-height: 42px;
            }
            .text{
              margin-top: 10px;
              width: fit-content;
              background: #FFFFFF;
              padding: 24px 20px;
              font-size: 28px;
              border-radius: 0 15px 15px 15px;
            }
            .content{
              width: fit-content;
              margin-top: 10px;
              border-radius: 0 15px 15px 15px;
              color: #0B0E0E;
              line-height: 40px;
              white-space:pre-wrap;
              padding: 24px 20px;
              background: #FFFFFF;
              .contentText {
                display: inline-block;
                font-size: 28px;
                color: #3D3D3D;
                line-height: 50px;
                word-break: break-all;
                white-space: pre-wrap;
                @keyframes BLINK {
                  to {
                    visibility: hidden
                  }
                }
                &.loading::after {
                  -webkit-animation: BLINK 1s steps(5, start) infinite;
                  animation: BLINK 1s steps(5, start) infinite;
                  content: "▎";
                  font-size: 16px;
                  left: 23px;
                  transform: translateY(-50%) scaleX(.7);
                  vertical-align: baseline
                }
              }
              .prompt{
                position: relative;
                margin-top: 16px;
                display: flex;
                &:before{
                  position: absolute;
                  content: '';
                  display: inline-block;
                  height: 1px !important;
                  width: 100%;
                  background: #F4F4F4;
                }
                .p_left{
                  margin-top: 16px;
                  flex: 1;
                  color: #BABABA;
                  display: flex;
                  align-items: center;
                  .icon{
                    font-size: 28px;
                  }
                  .promptText{
                    margin-left: 6px;
                    font-size: 24px;
                  }
                }
                .p_right{
                  margin-top: 16px;
                  margin-left: auto;
                  margin-right: 0;
                  display: flex;
                  gap: 0 30px;
                  .icon{
                    font-size: 28px;
                    color: #3D3D3D;
                  }
                  .icon-dianzan{
                    color: #197CFD;
                  }
                  .tread{
                    transform: rotateZ(-180deg);
                  }
                }
              }
              .answering{
                display: flex;
                .img{
                  width: 30px;
                  height: 30px;
                }
              }
            }
          }
        }
        &.system{
          font-family: "Regular", serif;
          font-size: 24px;
          font-weight: 400;
          width: 500px;
          line-height: 42px;
          color: #8C8C8C;
          margin: 0 auto;
          text-align: center;
          justify-content: center;
          span{
            color: #197CFD
          }
        }
        &.agent{
          flex: 1;
          .agent_service{
            width: 534px;
            margin-left: 20px;
            display: flex;
            justify-content: flex-end;
            flex-direction: column;
            .content{
              width: fit-content;
              margin-top: 10px;
              border-radius: 0 15px 15px 15px;
              color: #0B0E0E;
              line-height: 40px;
              white-space:pre-wrap;
              .contentText{
                padding: 24px 20px;
                background: #FFFFFF;
                display: inline-block;
                font-size: 28px;
                color: #3D3D3D;
                line-height: 50px;
                word-break: break-all;
                white-space: pre-wrap;
              }
            }
            .content{
              background:transparent;
              .imgSrc{
                img{
                  border-radius: 6px;
                  object-fit: cover;
                  width: auto;
                  height: auto;
                  max-width: 100%;
                  max-height: 100%;
                }
              }
            }
          }
        }
        &:last-child{
          margin-bottom: 10px;
        }
      }
    }
    &::-webkit-scrollbar { width: 0 !important }

  }
  .tabBar{
    width: 100%;
    //position: fixed;
    //z-index: 2;
    //bottom: 0;
    //left: 50%;
    //transform: translateX(-50%);
    padding:30px 0 0;
    .stop{
      width: 190px;
      height: 60px;
      background: #e0edf7b3;
      box-shadow: 0 18px 26px 0 rgba(154,193,230,0.39);
      border-radius: 30px;
      color:#187CFD ;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      .stop_img{
        width: 30px;
        height: 30px;
      }
      .stop_test{
        margin-left: 10px;
        font-size: 24px;
      }
    }
    .footer{
      width: 100%;
      padding:30px 20px 30px;
      box-sizing: border-box;
      background: #fff;
      display: flex;
      flex-direction: column;
      .contact{
        display: flex;
        align-items: center;
        gap: 0 20px;
        margin-right: 20px;
        height: 48px;
        .item{
          padding: 0 20px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 30px;
          background: #F1F9FF;
          cursor: pointer;
          a{
            text-decoration:none;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .icon{
            color: #197CFD;
            font-size: 24px;
          }
          button{
            height: 48px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            .text{
              color: #3D3D3D;
            }
          }
          .text{
            font-family: "Regular",serif;
            font-size: 24px;
            margin-left: 6px;
            color: #3D3D3D;
          }
          &.isOver{
            //background: #F1F9FF;
            .text{
              color: #197CFD;
            }
          }
        }
      }
      .message{
        width: 100%;
        border: 2px solid #197CFD;
        border-radius: 50px;
        margin: 0 auto ;
        display: flex;
        align-items:center;
        justify-content: space-between;
        padding: 10px 0 10px 20px;
        box-sizing: border-box;
        .camera{
          margin: 0 20px;
          .icon{
            color: #D4E4F9;
            font-size: 32px;
          }
          input{
            display: none;
          }
          label{
            display: flex;
            justify-items: center;
            align-items: center;
          }
        }
        form{
          flex: 1;
          display: flex;
          align-items: center;
        }
        .inp{
          padding: 10px 0 ;
          margin: auto 0 auto 10px;
          box-sizing: border-box;
          flex: 1;
          line-height: 40px;
          -ms-overflow-style: none;
          border: none;
          resize: none;
          outline: none;
          font-size: 28px;
          background: transparent;
          &::-webkit-input-placeholder{
            color: #BABABA;
            font-size: 24px;
          }
          &::-webkit-scrollbar {
            width: 0 !important;
            line-height: 100%;
          }
        }
        .send{
          width: 70px;
          height: 70px;
          border-radius: 50%;
          margin-right: 10px;
          margin-left: 20px;
          background: #197CFD url('@/assets/image/happen.png') center / 30px no-repeat;
        }
      }
    }
  }
}

</style>
<style>
.MyMsg .el-message__content{
  font-size: 24px !important;
}

</style>